<!--  -->
<template>
  <div>
       <van-form @submit="changeFromData">
        <div class="font15 mt10 pl10">
            <span class="titletext ">支部近期学习重点</span>
            <div class="graytext  mt10 font13">
                <span >发起人：</span>
                <span class="titletext">{{fromdata.applyUser}}</span>
            </div>
        </div>
        <div class="font11 mt10 bggray ptandpb10">
            <div class=" graytext pl10">
                <span >发起人组织：</span>
                <span class="titletext">{{fromdata.applyOrg}}</span>
            </div>
            <div class=" graytext pl10 mt10">
                <span >发起人联系方式:</span>
                <span class="titletext">{{fromdata.applyTel}}</span>
            </div>
        </div>
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
            <div class="blue_item"></div>
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">学习重点列表</span>
            <van-icon v-show="canEdit" style="line-height: 33px;color: #60a9ec;" color="#60a9ec" size="13px" name="plus" />
            <span v-show="canEdit" class="font13" style="display: flex; line-height: 33px;margin-left:5px;color: #60a9ec;margin-right:10px"
            @click="addFromdetail">新增</span>
        </div>  
        <div >
            <div v-for="(item,index) in fromdata.studyFiles" :key="index" 
            style="border: 1px solid  #60a9ec;margin:5px 10px 5px 10px; padding:5px 0px 5px 0px ;border-radius: 10px;"
            >
              <van-field  
                readonly
                center
                label="序号:"
                v-model="item.xh"
                label-width="2.5em"
              >
                <template v-if='canEdit' #button >
                    <van-button plain :hairline="true" size="small"  icon="delete-o" 
                          @click="fromDelete(index)" color="#f4511e" native-type="button" >删除</van-button>
                    <div @click="setfileindex(index)" style="position: relative;display: inline-block;">
                       <van-uploader    v-model="fileList" :after-read="fileUpload"  :preview-image='false'  style="margin-left:20px;align:right;">
                              <van-button plain  size="small" type="primary" icon="plus" color="#60a9ec" native-type="button" >附件</van-button>
                    </van-uploader>
                      </div>      
                   
                </template>
              </van-field>  
              <van-field
                rows="1"
                autosize
                type="textarea"
                v-model="item.name"
                required
                label-width="6.5em"
                :readonly="!canEdit"
                label="支部学习要点:"
                placeholder="请填写支部学习要点"
                :show-word-limit="canEdit"
                :rules="[{ required: true, message: '' }]"
                name="name"
                />
                <van-field label-width="10em" readonly   
                     label="附件:" class="lyy-width" input-align="left" placeholder="" >
                </van-field>
                <div v-for="(fileitem,index2) in item.formFiles" :key="fileitem.id" style="margin-left:20px">
                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                      <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{fileitem.fileName}}</a>
                        <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{fileitem.fileName}}</a> -->
                    </div>
                    <span class="font12 color-red ml5" v-if='canEdit' @click="uploadFileDelete(index,index2)">X</span>
                </div>
              
                <!-- <div v-if='canEdit' action="" class="font14 file" @click="setfileindex(index)" style="text-align:right;padding-right:20px">
                    <van-button  type="primary" color="#f4511e"  @click="fromDelete(index)" style="margin-left:20px">删除</van-button>
                    <van-uploader v-model="fileList" :after-read="fileUpload"  :preview-image='false' style="margin-left:20px;align:right;">
                        <van-button icon="plus" type="primary" color="#60a9ec" >上传文件</van-button>
                    </van-uploader>
                   
                </div> -->
                  <!-- <span class="font12 color-red ml5" v-if='canEdit' @click="fromDelete(index)">删除此条</span> -->
            </div>  
        </div> 
        <div v-if="canEdit&&isdrawType" style="padding-bottom:50px">
        </div>     
        <div v-if="canEdit&&!todotype" class="footer" >
            <van-button  block type="info" @click="tosave" native-type="button" 
            style="display: inline-block;width:50%;background-color: #fff;color:#60a9ec;border: 0px solid #fff;">保存草稿</van-button>
            <van-button  block type="info" native-type="submit" 
            style="display: inline-block;width:50%;border: 0px solid #60a9ec;">流转下一步</van-button>
        </div>
         <div v-if="todotype" class="footer" >
            <van-button  block type="info" native-type="submit" 
            style="display: inline-block;width:100%;border: 0px solid #60a9ec;">流转下一步</van-button>
        </div>
        </van-form>
        <div v-if="showHistory" class="spline"></div>
        <van-field  
            readonly
            center
            v-if="showHistory"
            label="当前办理人:"
            label-width="5.5em"
          />
        <div v-if="showHistory" class="font13 ptandpb10 pl16">
            <div>
                <span class="titletext font13">{{historydata.workItemApproverUser}}</span>
            </div>
            <div class="mt5">
                <span class="graytext font12 ">{{historydata.activityInstName}}</span>
            </div>
        </div>
        <div v-show="!isdrawType&&!istaizhang" class="spline"></div>
        <div v-show="!isdrawType&&!istaizhang"  style="padding-bottom: 42px">
          <div class="stitle font14">审批意见</div>
          <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
            <div
              class="spiece_flex"
              v-for="(item, index) in approveList"
              :key="index"
            >
              <div class="vertical-a-t display-ib" style="width: 25px">
                <i
                  v-if="index == 0"
                  class="iconfont icon-current font16 color-red2"
                ></i>
                <i
                  v-if="index > 0"
                  class="iconfont icon-yiban font16 color-theme"
                ></i>
                <div v-if="index != (approveList.length-1)" class="optionline"></div>
              </div>
              <div class="vertical-a-t display-ib" style="width: calc(100%)">
                <div style="white-space: nowrap">
                  <span class="color-theme font14"
                    >{{ item.PRODUCERNAME || "暂无" }}：</span
                  >
                  <span class="color-2 font14">{{
                    item.CONTENT || "暂无"
                  }}</span>
                </div>
                <div
                  class="mt05 color-8"
                  style="display: flex; align-items: baseline"
                >
                  <div
                    class="display-ib vertical-a-t font12"
                    style="margin-top: 2px;width: 100%"
                  >
                    {{ item.ORGNAME || "暂无" }}
                  </div>
                  <div
                    class="display-ib vertical-a-t font12 text-r"
                    style="margin-left: 10px; margin-top: 2px;text-align: right;width: 100%"
                  >
                    {{ item.MODIFIEDTIME || "暂无" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="color-9 font12 text-c">暂无数据</div>
          </div>
        </div>
  </div>
</template>

<script>
import {getxxzdDetail,getxxzdOpinionDetail,getxxzdHistory,
xxzduploadProcessFiles,deleteFromdata,xxzdSaveFrom} from '@/api/zbjqxxzdapi'
import {mapGetters} from "vuex"
import { Notify,Dialog, Toast } from 'vant'
import moment from 'moment'
import {openFileUrl} from '@/store/openFile'
  export default {
    data() {
       return {
           fromdata:{
               studyFiles: []
           },
           params:this.$route.query,
           todotype:false,
           istaizhang:false,
           isdrawType:false,
           canEdit:false,
           approveList:[],
           fileList:[],
           fileindex:0,
           showHistory:false,
           historydata:{},
       }
    },
    computed:{
        ...mapGetters(['user']),
        ...mapGetters(['userinfo'])
    },
    //生命周期--创建完成
    created() {
        console.log('todoType2:'+this.params.todoType)
        if(this.params.todoType=='1'){
          console.log('111111111111111')
          this.todotype=true;
        }else if(this.params.todoType=='2'){
          this.showHistory=true;
        }else{
          this.todotype=false;
        }
        if(this.params.isdraw=='1'){
          this.isdrawType=true;
          this.canEdit=true;
        }else{
          this.isdrawType=false;
          this.canEdit=false;
        }
            
        if (this.isdrawType&&this.params.istaizhang!='1'){
            this.fromdata.applyUser=this.userinfo.truename;
            this.fromdata.applyOrg=this.userinfo.belongOrgName;
            this.fromdata.applyTel =this.userinfo.preferredMobile;
            this.istaizhang=false;
        }else if (!this.isdrawType&&this.params.processInstId!=undefined){
            if(this.params.istaizhang=='1'){
                this.istaizhang=true;
            }else{
                this.istaizhang=false;
                if(this.todotype){    
                    if(this.params.location=='zbjqxxzd.start'){
                        this.canEdit=true;
                    }else{
                        this.canEdit=false;
                    }
                }else {
                    if(this.params.todoType=='3'){
                        this.isdrawType=true;
                        this.canEdit=true;
                    }else{
                        this.isdrawType=false;
                        this.canEdit=false;
                    }
                }
            }
              console.log('2222222222'+this.todotype)
            this.getdetail();
        }
    },
    //生命周期--挂载完成
    mounted() {
        this.$bus.$off('deleteDraw').$on('deleteDraw',()=>{
          console.log('删除附件'+this.fromdata.pmInsId)
          Dialog.confirm({
            title:'提示',
            message:'是否删除此草稿？'
          })
          .then(()=>{
            deleteFromdata(Object.assign({pmInsId:this.fromdata.pmInsId},{userName:this.user.userName}))
            .then((result)=>{
              if (result.data.errcode ==0){
                this.$bus.$emit('deletesuccess')
                this.$router.back(-1);
              }else {
                Notify(result.message)
              }
            })
          })
          .catch(()=>{

          })
        })
    },
    //方法调用
    methods: {
      openFileUrlfun(value){
            this.$router.push(
                {
                 name:'fileview',
                 query:{
                     openFileUrl: openFileUrl(value)
                    }
                }
            );
        },
        getdetail(){
            Toast.loading({
                message:'加载中',
                forbidClick:false
            });
            getxxzdDetail(Object.assign(this.params,{userName:this.user.userName}))
                .then((result)=>{
                    this.fromdetal={};
                    Toast.clear();
                    if(!result.data){
                        Notify(result.message);
                        return;
                    }
                    if(result.data.data){
                        this.fromdata=result.data.data;
                        if(!result.data.data.studyFiles){
                            this.fromdata.studyFiles=[];
                        }
                    }
                })
                if(this.showHistory){
                    getxxzdHistory(Object.assign(this.params),{userName:this.user.userName})
                        .then((result)=>{
                          Toast.clear();
                          if(!result.data){
                            Notify(result.message);
                            return;
                          }
                          if(result.data.data){
                            //数据过滤，并生成新的数组
                            this.historydata=result.data.data.filter(item=>item.currentState==10)[0]
                            if(this.historydata){
                               if(this.historydata.workItemApproverUser){
                                  this.showHistory=true;
                                }else{
                                  this.showHistory=false;
                                }
                            }else{
                              this.showHistory=false;
                            }
                          }else{
                            this.showHistory=false;
                          }
                        })
                }

                if(!this.istaizhang&&!this.isdrawType){ //不是台账或者草稿进入
                      getxxzdOpinionDetail(Object.assign(this.params),{userName:this.user.userName})
                        .then((result)=>{
                          Toast.clear();
                          if(!result.data){
                            Notify(result.message);
                            return;
                          }
                          this.approveList=result.data.data.reverse();
                        })
                }
        },
        addFromdetail(){
            const person={xh:'0',name:"",formFiles:[],fileList:[]}
            this.fromdata.studyFiles.push(person)
            for(var i=0;i<this.fromdata.studyFiles.length;i++){
                this.fromdata.studyFiles[i].xh=i+1;
            }
        },
        changeFromData(){ //提交流转
            if(this.fromdata.studyFiles.length<1){
              Notify({ type: 'warning', message: '请至少添加一条学习重点！'})
              return;
            }
            console.log('提交的数据'+JSON.stringify(this.fromdata))
            this.$router.push(
                {
                    name:'xxzdtosubmit',
                    params:{
                        formData:this.fromdata,
                        idcode:this.params
                    }
                }
            );
        },
        tosave(){ //
            console.log('保存的数据'+JSON.stringify(this.fromdata))
            xxzdSaveFrom(Object.assign({userName:this.user.userName},
            {flowParam:this.fromdata}))
            .then((res) => {
              this.isSubmit = false
              if(res.data.errcode==0){
                  Notify({ type: 'success', message: '保存成功' })
                  this.$router.back(-1);
              }else {
                  Notify(res.message);
              }
            })
            .catch((error) => {
              this.isSubmit = false
              Notify({ type: 'warning', message: '保存失败,请稍后重试' })
            })
        },
        setfileindex(index){
            console.log("设置序号");
            this.fileindex=index;
        },
        fileUpload(file,){
            
          console.log('序号XXXXXX'+this.fileindex)
            let dataurl=file.content;
            let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename = this.fileList[0].file.name;
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: false,
            });
            xxzduploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                if(this.fromdata.studyFiles[this.fileindex].formFiles!=null){
                    let listdetails = this.fromdata.studyFiles[this.fileindex].formFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdata.studyFiles[this.fileindex].formFiles=listdetails;
                    console.log(JSON.stringify(this.fromdata.drawFiles))
                }else{
                    this.fromdata.studyFiles[this.fileindex].formFiles=[];
                    this.fromdata.studyFiles[this.fileindex].formFiles.push(res.data.data.sysFiles);
                }
               
            })
            .catch(err=>{
                Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },
        uploadFileDelete(index,index2){
          Dialog.confirm({
            title:"提示",
            message : "是否删除此附件？"
          })
          .then(()=>{
               this.fromdata.studyFiles[index].formFiles.splice(index2,1);
          })
          .catch(()=>{

          })
         
        },
        fromDelete(index){
          Dialog.confirm({
            title:"提示",
            message:"是否删除此条内容？"
          })
          .then(()=>{
              console.log('AAA'+JSON.stringify(this.fromdata))
              this.fromdata.studyFiles.splice(index,1);
              for(var i=0;i<this.fromdata.studyFiles.length;i++){
                  this.fromdata.studyFiles[i].xh=i+1;
              }
          }).catch(()=>{

          })
           
        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
</style>